<template>
  <div id="main">
    <br><center>
    <button type = "button"
            class="btn btn-sm btn-primary color"
            data-toggle="modal"
            data-target="#addModal" @click="add()">馆内图书报丢
    </button></center>
    <br>
    <hr>
    <br>
    <table class="table table-striped table-hover">
      <tr>
        <td width="200"> 序号 </td>
        <td width="200">  丢失原因  </td>
        <td width="300"> 丢失书籍  </td>

      </tr>
      <tr v-for="(item,index) in list.slice((current-1)*size,current*size)">
        <td width="200"> {{index+1}} </td>
        <td width="200">{{item.reason}}</td>
        <td width="300"> {{item.book.name}} </td>
        <td>
        </td>
      </tr>
    </table>

    <Page :total="total" :allPage="allpage" v-on:change="changePage"></Page>


    <div class="modal fade" id="addModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title"><center>添加</center></h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            丢失原因：<input type="text" v-model="obj.reason"><br>

            丢失图书：
            <select type="text"  v-model="obj.book"  placeholder="请选择" >
              <option  v-for="item in blist" :value="item">{{item.name}}</option>
            </select><br>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click = "okadd()">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import axios from 'axios';
    import Page from '@/publicComponent/Page';

    export default {
        name: "Bookloss",
        components:{
            Page
        },
        data: function () {
            return  {
                url:this.baseURL+'bookloss.ctl',
                burl :this.baseURL+'book.ctl',
                list:[],

                blist:[],
                obj:{},
                name:'',
                size:4,
                current:1,
                total:0,
                allpage:0,
            }
        },
        created(){
            this.getList();
            var arr = this;
            axios.get(this.url).then((res) => {
                this.list=res.data;
            })
        },
        methods:{

            getList(){
                axios.get(this.url).then((res) => {
                    this.list=res.data;
                    this.total=this.list.length
                    this.allpage=Math.ceil(this.total/this.size)//ceil小数向上取整 round四舍五入 parseInt丢弃小数
                })
            },

            add:function(){

                axios.get(this.burl).then((res) => {
                    this.blist=res.data;
                })
            },

            okadd:function(){
                this.axios.post(this.url,this.obj)
                    .then((res) => {
                        alert("添加成功");
                        this.getList();
                        this.obj={};
                    })
                $("#addModal").modal('hide');
            },

            changePage:function(index){
                this.current = index;
            }
        }

    }
</script>

<style scoped>
  .color{
    background-color:#E6E6E6; color: #555555}
  #main{padding:5px;}
  .modal-body{
    text-align: center;
    position: relative;
    line-height: 50px;
    padding-left:50px;
  }
  .modal-body input{
    height:28px;
  }
</style>
